<template>
  <div class="box">
    <h1>这是A组件,{{ count }}</h1>
    <el-button type="primary" @click="handlePlus">+</el-button>
    <el-button type="success" @click="handleAdd">新增商品</el-button>
    <div v-for="(item, index) in glist" :key="index">
      商品名称 {{ item.name }} 商品价格 {{ item.price }} 商品库存 {{ item.m }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count.num;
    },
    glist() {
      return this.$store.state.goods.glist;
    },
  },
  methods: {
    handlePlus() {
      this.$store.commit("count/increment"); //触发mutation
    },
    handleAdd() {
      this.$store.commit("goods/add", {
        name: "新商品",
        price: (Math.random() * 500 + 500).toFixed(2),
        m: 1,
      });
    },
  },
};
</script>

<style scoped>
.box {
  height: 300px;
  width: 50%;
  border: 1px solid #333;
  float: left;
  box-sizing: border-box;
}
</style>
